<template>
  <el-container>
    <el-row>
      <el-col :span="16">
        <el-row>

          <el-col :span="12">
            <div style="padding: 5px">
              <el-card style="height: 100%">
                <div slot="header">
                  <span>实时监控</span>
                </div>
                <div style="display:flex;height: 150px;padding:0">
                  <div style="width: 50%;height: 100%">
                    <el-button style="width: 100%;height: 100%">
                      <el-progress type="dashboard" :percentage="cpu" :color="colors"></el-progress>
                      <div>cpu使用率</div>
                    </el-button>
                  </div>
                  <div style="width: 50%;height: 100%">
                    <el-button style="width: 100%;height: 100%">
                      <el-progress type="dashboard" :percentage="memory" :color="colors"></el-progress>
                      <div>内存占用率</div>
                    </el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>

          <el-col :span="12">
            <div style="padding: 5px">
              <el-card style="height: 100%">
                <div slot="header">
                  <span>待办事项</span>
                </div>
                <div style="display:flex;flex-wrap:wrap;height: 150px;padding:0">
                  <div style="width: 50%;height: 100%">
                    <el-button style="width: 100%;height: 100%">
                      <p style="font-size: 30px">{{requireCount}}</p>
                      <span style="margin-top: 5px;">待审需求<i class="el-icon-help"></i></span>
                    </el-button>
                  </div>
                  <div style="width: 50%;height: 100%">
                    <el-button style="width: 100%;height: 100%">
                      <p style="font-size: 30px">{{achieveCount}}</p>
                      <span style="margin-top: 5px;">待审成果<i class="el-icon-cpu"></i></span>
                    </el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="24">
            <div style="padding: 5px">
              <el-card style="height: 100%">
                <div id="myChart" :style="{height: '320px',width: '100%'}"></div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <!--  日历  -->
        <div style="height: 620px;padding:5px">
          <el-card style="height: 100%">
            <el-calendar></el-calendar>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </el-container>

</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        echartInstance: '',//记录echarts实例，方便做响应式
        achieveMonth: [],
        requireMonth: [],
        dateArr: [],
        achieveCount: '',
        requireCount: '',
        cpu: 0,
        memory: 0,
        colors: [
          {color: '#21d06c', percentage: 20},
          {color: '#1989fa', percentage: 40},
          {color: '#B6D364', percentage: 60},
          {color: '#e6a23c', percentage: 80},
          {color: '#f56c6c', percentage: 100}
        ]
      }
    },
    methods: {
      fast(data) {
        this.$router.push({path: data});
      },
      drawCharts() {
        let option = {
          title: {
            text: '数据统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['需求数', '成果数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dateArr
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '需求数',
              type: 'line',
              stack: '总量',
              data: this.requireMonth
            },
            {
              name: '成果数',
              type: 'line',
              stack: '总量',
              data: this.achieveMonth
            }
          ]
        };
        let chart = this.$echarts.init(document.getElementById('myChart'));
        this.echartInstance = chart;//保存echarts实例
        chart.setOption(option);
      }, handleData(achieveMonthCount, requireMonthCount) {
        let myDate = [];
        let myAchieve = [];
        let myRequire = [];
        achieveMonthCount.forEach(item => {
          myDate.push(item.month);
        });
        requireMonthCount.forEach(item => {
          if (!myDate.includes(item.month)) {
            myDate.push(item.month);
          }
        });
        myDate.sort(function (a, b) {
          return a - b;
        });
        myDate.forEach(item => {
          let index = achieveMonthCount.findIndex(item1 => item1.month == item);
          if (index != -1) {
            myAchieve.push(achieveMonthCount[index].num);
          } else {
            myAchieve.push(0);
          }
          let index1 = requireMonthCount.findIndex(item1 => item1.month == item);
          if (index1 != -1) {
            myRequire.push(requireMonthCount[index1].num);
          } else {
            myRequire.push(0);
          }

        });
        for (const index in myDate) {
          myDate[index] = myDate[index] + '月';
        }
        this.achieveMonth = myAchieve;
        this.requireMonth = myRequire;
        this.dateArr = myDate;
      }, getData() {
        this.$axios.post('/admin/home').then(res => {
            this.cpu = res.cpu;
            this.memory = res.memory;
        })
      }
    }, mounted() {
      this.drawCharts();
      // let myResize = elementResize();
      // let that = this;
      // myResize.listenTo(document.getElementById('myChart'), function (element) {
      //   that.$nextTick(function () {
      //     that.echartInstance.resize();
      //   })
      // });
    },
    watch: {
      dateArr(newValue, oldValue) {
        this.drawCharts();
      }
    },
    created() {
      this.getData();
    }
  }
</script>

<style>
  .el-calendar__header {
    padding: 6px 20px;
  }

  .el-calendar-table .el-calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<style scoped>

</style>
